<template>
  <div ref="k" class="el-card is-hover-shadow">
    <div ref="titleRef" class="k-title el-card__header">未归还排行榜</div>
    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%"
      :height="th"
      @mouseenter="autoScroll(true, 'mouseenter')"
      @mouseleave="autoScroll(false, 'mouseleave')"
    >
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        align="center"
      />
    </el-table>
  </div>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import dayjs from "dayjs";

const props = defineProps({
  data: { type: Array, default: () => [] }
});

const tableData = computed(() => props.data);

const columns = [
  { prop: "userNickName", label: "用户名" },
  { prop: "totalNoReturnCount", label: "累计超期未归还" },
  { prop: "outTimeNoReturnCount", label: "超期未归还" }
];

const k = ref(null);
const th = ref(100);
onMounted(() => {
  th.value = k.value.offsetHeight - 35;
});

// 自动滚动
let scrolltimer = null;
const tableRef = ref(null);

const autoScroll = stop => {
  if (!tableData.value.length) return false;
  const tableBody = tableRef.value.$refs.bodyWrapper;
  const divData = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
  if (divData.scrollHeight == divData.clientHeight) {
    return false;
  }
  if (stop) {
    window.clearInterval(scrolltimer);
  } else {
    const step = 5;
    scrolltimer = window.setInterval(() => {
      divData.scrollTop += step;
      if (
        divData.clientHeight + divData.scrollTop >=
        divData.scrollHeight - 1
      ) {
        divData.scrollTop = 0;
      }
    }, 150);
  }
};
onMounted(() => {
  autoScroll(false);
});
onBeforeUnmount(() => {
  autoScroll(true);
});
</script>
